<template>
  <div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" >
            <el-menu-item @click="clickMeun(item)" v-for="item in meun" :key="item.path" :index="item.path">
                <i :class="`el-icon-`+item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </el-menu-item>
        </el-menu>
  </div>
</template>

<script>
export default {
  name: "ComponentsAside",
  data() {
    return {
        meun:[
            {
                path:'/home',
                name:'home',
                label:'首页',
                icon:'box',
                url:'Home/index'
            },
            {
                path:'/dept',
                name:'dept',
                label:'部门信息管理',
                icon:'coordinate',
                url:'Dept/index'
            },
            {
                path:'/emp',
                name:'emp',
                label:'员工信息管理',
                icon:'user',
                url:'Emp/index'
            },
        ]
    }
  },
    methods: {
    handleOpen(key, keyPath) {
    console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
    console.log(key, keyPath);
    },
    clickMeun(item){
        this.$bus.$emit('isShowMeun',item)
        this.$router.push({
            name : item.name
        })
    }
}
};
</script>

<style  scoped>
    .el-menu-vertical-demo{
        min-height: 90vh;
        background-color: aqua;
    }
    .el-menu-item{
        padding-right: 70px;
    }
</style>